<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8"/>
		<title>导航栏</title>
		<style>
		    *{margin:0; padding:0;}
			.list{
				margin:0 auto;
				width:430px;
			}
			.list>li{
				width:100px;
				height:30px;
				background:#898;
				/*display:block;*/
				margin-left:10px;
				float:left;
				text-align:center;
				line-height:30px;
			}
			li{list-style-type:none;}
			.list>li:first-child{
				margin-left:0;
			}
			ul>li{
				width:100px;
				height:30px;
				margin-top:10px;
			}
			.list>li>ul{
				display:none;
				padding-top:10px;
			}
			.list>li:hover ul{
				display:block;
			}
			ul li:first-child{
				margin-top:0;
			}
			ul>li:hover{background:#898; color:white;}
		</style>
	</head>
	<body>
		<nav class="list">
			<li href="">导航1
				<ul>
					<li>内容1</li>
					<li>内容2</li>
					<li>内容3</li>
					<li>内容4</li>
				</ul>
			</li>
			<li href="">导航2
				<ul>
					<li>内容1</li>
					<li>内容2</li>
					<li>内容3</li>
					<li>内容4</li>
				</ul>
			</li>
			<li href="">导航3
					<ul>
					<li>内容1</li>
					<li>内容2</li>
					<li>内容3</li>
					<li>内容4</li>
				</ul>
			</li>
			<li href="">导航4
					<ul>
					<li>内容1</li>
					<li>内容2</li>
					<li>内容3</li>
					<li>内容4</li>
				</ul>
			</li>
		</nav>
	</body>
</html>